import { EditorView } from '@codemirror/view'
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
import { tags } from '@lezer/highlight'

const chalky = '#e5c07b',
	coral = '#e06c75',
	cyan = '#56b6c2',
	invalid = '#ffffff',
	ivory = '#abb2bf',
	stone = '#7d8799',
	malibu = '#61afef',
	sage = '#98c379',
	whiskey = '#d19a66',
	violet = '#c678dd',
	darkBackground = '#21252b',
	highlightBackground = '#2c313a',
	background = '#353a42',
	tooltipBackground = '#353a42',
	selection = '#3E4451',
	cursor = '#528bff'

const color = {
	chalky,
	coral,
	cyan,
	invalid,
	ivory,
	stone,
	malibu,
	sage,
	whiskey,
	violet,
	darkBackground,
	highlightBackground,
	background,
	tooltipBackground,
	selection,
	cursor
}

const oneDarkTheme = EditorView.theme(
	{
		'&': {
			color: ivory,
			backgroundColor: background
		},
		'.cm-content': {
			caretColor: cursor
		},
		'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
		'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
			{ backgroundColor: selection },
		'.cm-panels': { backgroundColor: darkBackground, color: ivory },
		'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
		'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
		'.cm-searchMatch': {
			backgroundColor: '#72a1ff59',
			outline: '1px solid #457dff'
		},
		'.cm-searchMatch.cm-searchMatch-selected': {
			backgroundColor: '#6199ff2f'
		},
		'.cm-activeLine': { backgroundColor: '#6699ff0b' },
		'.cm-selectionMatch': { backgroundColor: '#aafe661a' },
		'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
			backgroundColor: '#bad0f847',
			outline: '1px solid #515a6b'
		},
		'.cm-gutters': {
			backgroundColor: background,
			color: stone,
			border: 'none'
		},
		'.cm-activeLineGutter': {
			backgroundColor: highlightBackground
		},
		'.cm-foldPlaceholder': {
			backgroundColor: 'transparent',
			border: 'none',
			color: '#ddd'
		},
		'.cm-tooltip': {
			border: 'none',
			backgroundColor: tooltipBackground
		},
		'.cm-tooltip .cm-tooltip-arrow:before': {
			borderTopColor: 'transparent',
			borderBottomColor: 'transparent'
		},
		'.cm-tooltip .cm-tooltip-arrow:after': {
			borderTopColor: tooltipBackground,
			borderBottomColor: tooltipBackground
		},
		'.cm-tooltip-autocomplete': {
			'& > ul > li[aria-selected]': {
				backgroundColor: highlightBackground,
				color: ivory
			}
		}
	},
	{ dark: true }
)

const oneDarkHighlightStyle = HighlightStyle.define([
	{
		tag: tags.keyword,
		color: violet
	},
	{
		tag: [tags.name, tags.deleted, tags.character, tags.macroName],
		color: coral
	},
	{
		tag: [tags.function(tags.variableName), tags.labelName],
		color: malibu
	},
	{
		tag: [
			tags.color,
			tags.propertyName,
			tags.constant(tags.name),
			tags.standard(tags.name)
		],
		color: whiskey
	},
	{
		tag: [tags.definition(tags.name), tags.separator],
		color: ivory
	},
	{
		tag: [
			tags.typeName,
			tags.className,
			tags.number,
			tags.changed,
			tags.annotation,
			tags.modifier,
			tags.self,
			tags.namespace
		],
		color: chalky
	},
	{
		tag: [
			tags.operator,
			tags.operatorKeyword,
			tags.url,
			tags.escape,
			tags.regexp,
			tags.link,
			tags.special(tags.string)
		],
		color: cyan
	},
	{
		tag: [tags.meta, tags.comment],
		color: stone
	},
	{
		tag: tags.strong,
		fontWeight: 'bold'
	},
	{
		tag: tags.emphasis,
		fontStyle: 'italic'
	},
	{
		tag: tags.strikethrough,
		textDecoration: 'line-through'
	},
	{
		tag: tags.link,
		color: stone,
		textDecoration: 'underline'
	},
	{
		tag: tags.heading,
		fontWeight: 'bold',
		color: coral
	},
	{
		tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
		color: whiskey
	},
	{
		tag: [tags.processingInstruction, tags.string, tags.inserted],
		color: sage
	},
	{
		tag: tags.invalid,
		color: invalid
	}
])

const oneDark = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)]

export { color, oneDark, oneDarkHighlightStyle, oneDarkTheme }
